window.onload = function () {
  // 1. 获取节点
  var username = document.getElementById('username')
  var password = document.getElementById('password')
  var btnLogin = document.getElementById('js-btn-login')
  const form = document.querySelector("#content form");

  // 2. 定义一个创建错误节点的方法
  function createErrorElement(target, id, text) {
    // 创建警告节点内容
    var errNode = document.createElement('p')
    errNode.id = id
    errNode.innerHTML = text
    errNode.style.cssText = "color:red;font-size:12px;text-align:left;text-indent: 10px;"
    // 插入警告节点
    target.parentNode.insertBefore(errNode, target.nextSibling)
  }

  // 3. 绑定失去焦点判断事件
  // 3.1 用户名的校验（失去焦点判断）
  function userNameValidate() {
    var errNode = document.getElementById('mobileError')
    // 为空的判断
    if (username.value.trim().length === 0) {
      // 有节点移除
      if (errNode) errNode.parentNode.removeChild(errNode)
      // 创建错误节点，挂载
      createErrorElement(username, 'mobileError', '请输入用户名')
      return false
    }
    // // 格式校验
    // var reg = /^1[3|5|7|8]\d{9}$/
    // if (!reg.test(username.value)) {
    //   // 有节点移除
    //   if (errNode) errNode.parentNode.removeChild(errNode)
    //   // 去掉关闭按钮
    //   password.parentNode.querySelector('.close').style.display = 'none'
    //   // 创建错误节点，挂载
    //   createErrorElement(username, 'mobileError', '格式不正确')
    //   return false
    // }
    // // 没有问题，存在错误节点就移除节点
    if (errNode) errNode.parentNode.removeChild(errNode)
    return true
  }
  username.onblur = userNameValidate
  // 3.2 密码的校验（失去焦点判断）
  function passwordValidate() {
    var errNode = document.getElementById('passwordError')
    // 为空的判断
    if (password.value.trim().length === 0) {
      // 有节点移除
      if (errNode) errNode.parentNode.removeChild(errNode)
      // 去掉关闭按钮
      password.parentNode.querySelector('.close').style.display = 'none'
      // 创建错误节点，挂载
      createErrorElement(password, 'passwordError', '请输入密码')
      return false
    }
    // 没有问题，存在错误节点就移除节点
    if (errNode) errNode.parentNode.removeChild(errNode)
    return true
  }
  password.onblur = passwordValidate

  // 4. 输入值后显示删除按钮,点击删除改行内容
  var closeUser = username.previousElementSibling
  var closePwd = password.previousElementSibling
  // 输入值后显示删除按钮
  username.onkeyup = function () {
    if (this.value) closeUser.style.display = 'block'
  }
  password.onkeyup = function () {
    if (this.value) closePwd.style.display = 'block'
  }
  // 点击删除改行内容
  closeUser.onclick = function () {
    username.value = ''
    var errNode = document.getElementById('mobileError')
    if (errNode) errNode.parentNode.removeChild(errNode)
    this.style.display = 'none'
  }
  closePwd.onclick = function () {
    password.value = ''
    var errNode = document.getElementById('passwordError')
    if (errNode) errNode.parentNode.removeChild(errNode)
    this.style.display = 'none'
  }

  // 5. 登录按钮表单提交
  form.addEventListener("submit", async function (e) {
    e.preventDefault();
    const { data } = await axios.post('http://124.223.14.236:3001/api/user/login', $("form").serialize())
    console.log(data);
    if (data.success) {
      alert("登录成功:" + data.msg)
      localStorage.setItem("token", data.data.token);
      localStorage.setItem("id", data.data.id);
      alert("登录成功:我已经将token存在本地存储中了哦");
    } else {
      alert("登录失败:" + data.msg);
    }

  });

}